<template>
	<view style="background-color: #FFFFFF;min-height: 700px;">
		<u-navbar :background="background" :is-back="false" :title-bold="true" title="个人中心" back-icon-color="#fff" title-color="#fff" :border-bottom="false">
			<view style="width: 100%;">
				<u-icon name="arrow-left" class="u-m-l-10" color="#fff" size="52" style="float: left;" @click="goHome"></u-icon>
				<u-icon name="setting" class="u-m-r-15" color="#fff" size="52" style="float: right;"></u-icon>
			</view>
		</u-navbar>
		
		<view style="background: #2979ff linear-gradient(to bottom, rgba(0,255,0,0), rgba(239, 239, 239, 0.6)); height: 290rpx;" class=" user-box u-p-l-30 u-p-r-20 u-p-t-10 u-p-b-10">
			<view class="u-flex"><!-- u-flex -->
				<view class="u-m-r-20 u-p-t-45">
					<u-avatar :src="avatar" size="130" @click="profile"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-p-b-15 u-p-t-15" style="color: #FFFFFF;font:900 20px Pingfang SC;">{{vuex_user.user.userName}}</view>
					<view class="u-font-14 u-tips-color" style="color: #e3e3e3;font:400 14px 'Pingfang SC';">昵称：{{vuex_user.user.nickName}}</view>
				</view>
			</view>
		</view>
		
		<view class="u-p-l-30 u-p-r-30" style="position: relative;top: -50px;">
			<view class="center-nav u-p-t-40 u-p-b-40" style="box-shadow: 1px 4px 5px #e7e7e7;">
				<u-row>
					<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
						<view v-if="item.name=='问题反馈'">
							<!-- 调用微信反馈功能 -->
							<button type="default" open-type="feedback"  class="clearBtn" hover-class="none" style="background-color: #FFFFFF;">
								<u-icon :name="item.icon" color="#000000" size="50"></u-icon>
								<view class="tabName" style="padding-top: 20rpx;">{{item.name}}</view>
							</button>
						</view>
						<view @click="clickNav(item.url)" v-else>
							<!-- <u-icon :name="item.icon" color="#909399" size="50"></u-icon> -->
							<u-count-to :start-val="0" :end-val="item.n" style="font: 800 20px 'Pingfang SC';"></u-count-to>
							<view class="tabName">{{item.name}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<view class="u-m-t-20">
				<u-cell-group :border="false">
					<u-cell-item icon="setting" title="个人中心" :title-style="{'font-size':'30rpx'}" @click="setting"></u-cell-item>
					<u-cell-item icon="level" :arrow="false" title="技术支持" :title-style="{'font-size':'30rpx'}" value="15718592236"  @click="callPhoneNumber"></u-cell-item>
					<u-cell-item icon="question-circle" title="常见问题" :title-style="{'font-size':'30rpx'}" @click="problem"></u-cell-item>
					<!-- <u-cell-item icon="star" title="关于作者" :title-style="{'font-size':'30rpx'}" @click="aboutMe"></u-cell-item> -->
				</u-cell-group>
			</view>
			
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#2979ff',
				},
				//avatar: 'https://wx.qlogo.cn/mmhead/zx2sAicWDoJOeop7ywQxDDgBD8kGsSVB95S7ib0Oax3yo/132',
				avatar: uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar,
				show:true,
				navList:[
				   {name:"浏览记录",icon:"checkmark-circle",n:23},
				   {name:"我的收藏",icon:"heart",n:128},
				   {name:"我的委托",icon:"order",n:231},
				   {name:"问题反馈",icon:"info-circle"}
				],
			}
		},
		onLoad() {
			uni.$on('updateAvatar', (obj) => {
				// 获取数据
				this.updateAvatar();
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('updateAvatar');
		},
		onShow(){
			// 检查token
			this.checkToken();
		},
		methods: {
			logout() {
				// 登录成功修改token与用户信息
				this.$u.vuex('vuex_token', '');
				this.$u.vuex('vuex_user', {});
				this.$u.route('/pages/login/login')
			},
			profile(){
				this.$u.route('/pages/profile/profile')
			},
			setting(){
				this.$u.route('/pages/profile/setting')
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "18720989281",
				});
			},
			problem(){
				this.$u.route({
					url: 'pages/login/problem'
				})
			},
			// 关于作者
			aboutMe() {
				this.$u.route('/pages/profile/aboutMe')
			},
			checkToken(){
				// 判断是否有token
				let lifeData = uni.getStorageSync('lifeData');
				let token = lifeData.vuex_token
				if(!token){
					// 没有token 则跳转到登录
					return uni.reLaunch({
						url:'../login/login'
					})
				}else{
					// 判断Token是否有效
					let url = "/api/profile/isExpiration";
					this.$u.get(url,{
						token:token
					}).then(obj => {
						if(obj.data){
							// 没有token过期则跳转到登录
							return uni.reLaunch({
								url:'../login/login'
							})
						}
					});
				}
			},
			code(){
				this.$mytip.toast('敬请期待')
			},
			clickNav(url){
				if(url){
					this.$u.route(url);
				}else{
					this.$mytip.toast('敬请期待')
				}
			},
			updateAvatar(){
				this.avatar = uni.getStorageSync('lifeData').vuex_user.user.avatar.includes(config.staticUrl)?uni.getStorageSync('lifeData').vuex_user.user.avatar:config.staticUrl+uni.getStorageSync('lifeData').vuex_user.user.avatar
			},
			goHome(){
				uni.reLaunch({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
*{font:800 14px 'Pingfang SC';}
.user-box{
	background-color: #fff;
	justify-content: space-between;
}

.center-nav{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	padding: 30rpx 0;
	border-radius: 8px;
	.tabName{
		font:800 14px 'Pingfang SC';
		color: #aaa;
		padding-top: 10rpx;
	}
}

.qiandao{
	color: #606266;
	font-size: 24rpx;
	margin-right: 24rpx;
	margin-top: 54rpx;
	justify-content:center;
	align-items: center;
}

.clearBtn{
		margin:0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
}

.clearBtn::after{
	position: unset !important;
	border: unset;
}
</style>